import React, { useEffect, useState } from "react";
import "./style.css";
import { Card, Select, Input, Button, message } from "antd";
import { getLiveList } from "../../../store/live";
import { LiveType, StoreStateType } from "../../../interface";
import { useNavigate, NavLink } from "react-router-dom";
import { useSelector } from "react-redux";
import { apiLiveDel } from "../../../api";

const { Option } = Select;


const Live = () => {
  // 所有数据
  const liveData = useSelector(
    (state: StoreStateType) => state.PublicReducer.liveList
  );

  console.log(liveData);

  const navigate = useNavigate();
  const toDetail = (id: number) => {
    navigate(`/livedacte/${id}`);
  };

  //删除
  const handleDelete = (id: number) => {
    apiLiveDel({ id }).then((res: any) => {
      if (res.code === 200) {
        message.success(res.mess);
        getLiveList();
      }
    });
  };

  
  useEffect(() => {
    // 获取列表数据
    getLiveList();
  }, []);

  const [value, setValue] = useState("");
  const changeState = (value: string) => {
    setState(value);
  };
  const [state, setState] = useState("");
  // 搜索
  const searchTable = () => {
    getLiveList({
      value,
      state,
    });
  };

  return (
    <div className="Livebox">
      <Card style={{ width: 1670 }}>
        <div className="Livesanji">
          <div className="Liveinp">
            <span>搜索</span>
            <Input
              placeholder="请输入姓名/ID"
              style={{ width: 300 }}
              value={value}
              onChange={(e) => setValue(e.target.value)}
            ></Input>
          </div>

          <div className="Livezt">
            <span>状态：</span>
            <Select value={state} style={{ width: 180 }} onChange={changeState}>
              <Option value="直播中">直播中</Option>
              <Option value="已结束">已结束</Option>
            </Select>
          </div>

          <div>
            <Button
              type="primary"
              style={{ width: 200 }}
              onClick={searchTable}
              className="Livechaxun"
            >
              查询
            </Button>
          </div>
        </div>
      </Card>

      <Card style={{ width: 1670 }} className="Livebody">
        <div className="Liveer">
        {liveData.length &&
          liveData.map(
            (
              item: {
                id: any;
                content: string | undefined;
                img: string | undefined;
                title:
                  | boolean
                  | React.ReactChild
                  | React.ReactFragment
                  | React.ReactPortal
                  | null
                  | undefined;
                time:
                  | boolean
                  | React.ReactChild
                  | React.ReactFragment
                  | React.ReactPortal
                  | null
                  | undefined;
              },
              ind: React.Key | null | undefined
            ) => {
              return (
                <div key={ind} className="Livelist">
                  <dl>
                    <dt>
                      <img src={item.img} alt="" />
                    </dt>

                    <dd>
                      <span>{item.title}</span>
                      <p>{item.content}</p>
                    </dd>

                    <div className="livess">
                      <Button type="link" onClick={() => toDetail(item.id)}>
                        进入直播间
                      </Button>
                      <Button type="link" onClick={() => handleDelete(item.id)}>
                        删除
                      </Button>
                    </div>
                  </dl>
                </div>
              );
            }
          )}
        </div>


      </Card>
    </div>
  );
};
export default Live;
